<template>
  <div class="dayin">
    <el-button type="primary" @click="print()" class="dayin_btn"
      >打印预览</el-button
    >
    <div ref="print" id="printArea">
      <div v-for="(item, index) in dayinlist" :key="index">
        <div style="padding: 5px; box-sizing: border-box">
          <el-row>
            <el-col
              v-for="(ite, ind) in item"
              :key="ind"
              style="text-align: center"
            >
              <!-- <span
              v-if="ite.field_name == '领单人'"
              style="display: block; width: 100%; text-align:center;font-size: 18px;"
              >{{ company_name}}接单单据</span
            > -->
              <span
                v-if="ite.field_name == '领单人'"
                style="
                  display: block;
                  width: 100%;
                  text-align: center;
                  font-size: 18px;
                "
                >慕歌家居接单单据</span
              >
            </el-col>
          </el-row>

          <el-row style="margin-top: 10px">
            <!-- <el-col :span="6" style="text-align: right; padding-right: 10px">
            <span style="display: block; width: 100%; text-align: right;font-size: 14px;" >   领单人:</span>
          </el-col> -->
            <el-col
              v-for="(ite, ind) in item"
              :key="ind"
              style="text-align: left"
            >
              <span
                v-if="ite.field_name == '二维码'"
                style="
                  display: block;
                  text-align: left;
                  font-size: 14px;
                  margin: 0 auto;
                  display: flex;
                  justify-content: center;
                "
              >
                <vue-qr :text="ite.value" :size="120"></vue-qr
              ></span>
            </el-col>
          </el-row>
          <el-row style="margin-top: 15px">
            <el-col :span="6" style="text-align: right; padding-right: 10px">
              <span
                style="
                  display: block;
                  width: 100%;
                  text-align: right;
                  font-size: 14px;
                "
              >
                客户名称:</span
              >
            </el-col>
            <el-col
              v-for="(ite, ind) in item"
              :key="ind"
              :span="18"
              style="text-align: left"
            >
              <span
                v-if="ite.field_name == '客户名称'"
                style="
                  display: block;
                  width: 100%;
                  text-align: left;
                  font-size: 14px;
                "
                >{{ ite.value }}</span
              >
            </el-col>
          </el-row>
          <el-row style="margin-top: 10px">
            <el-col :span="6" style="text-align: right; padding-right: 10px">
              <span
                style="
                  display: block;
                  width: 100%;
                  text-align: right;
                  font-size: 14px;
                "
              >
                订单号:</span
              >
            </el-col>
            <el-col
              v-for="(ite, ind) in item"
              :key="ind"
              :span="18"
              style="text-align: left"
            >
              <span
                v-if="ite.field_name == '订单号'"
                style="
                  display: block;
                  width: 100%;
                  text-align: left;
                  font-size: 14px;
                "
                >{{ ite.value }}</span
              >
            </el-col>
          </el-row>
          <el-row style="margin-top: 10px">
            <el-col :span="6" style="text-align: right; padding-right: 10px">
              <span
                style="
                  display: block;
                  width: 100%;
                  text-align: right;
                  font-size: 14px;
                "
              >
                订单日期:</span
              >
            </el-col>
            <el-col
              v-for="(ite, ind) in item"
              :key="ind"
              :span="18"
              style="text-align: left"
            >
              <span
                v-if="ite.field_name == '订单日期'"
                style="
                  display: block;
                  width: 100%;
                  text-align: left;
                  font-size: 14px;
                "
                >{{ ite.value }}</span
              >
            </el-col>
          </el-row>
          <el-row style="margin-top: 10px">
            <el-col :span="6" style="text-align: right; padding-right: 10px">
              <span
                style="
                  display: block;
                  width: 100%;
                  text-align: right;
                  font-size: 14px;
                "
              >
                交货日期:</span
              >
            </el-col>
            <el-col
              v-for="(ite, ind) in item"
              :key="ind"
              :span="18"
              style="text-align: left"
            >
              <span
                v-if="ite.field_name == '交货日期'"
                style="
                  display: block;
                  width: 100%;
                  text-align: left;
                  font-size: 14px;
                "
                >{{ ite.value }}</span
              >
            </el-col>
          </el-row>
          <el-row style="margin-top: 10px">
            <el-col :span="6" style="text-align: right; padding-right: 10px">
              <span
                style="
                  display: block;
                  width: 100%;
                  text-align: right;
                  font-size: 14px;
                "
              >
                流水号:</span
              >
            </el-col>
            <el-col
              v-for="(ite, ind) in item"
              :key="ind"
              :span="18"
              style="text-align: left"
            >
              <span
                v-if="ite.field_name == '流水号'"
                style="
                  display: block;
                  width: 100%;
                  text-align: left;
                  font-size: 14px;
                "
                >{{ ite.value }}</span
              >
            </el-col>
          </el-row>
          <el-row style="margin-top: 10px">
            <el-col :span="6" style="text-align: right; padding-right: 10px">
              <span
                style="
                  display: block;
                  width: 100%;
                  text-align: right;
                  font-size: 14px;
                "
              >
                紧急程度:</span
              >
            </el-col>
            <el-col
              v-for="(ite, ind) in item"
              :key="ind"
              :span="18"
              style="text-align: left"
            >
              <span
                v-if="ite.field_name == '紧急程度'"
                style="
                  display: block;
                  width: 100%;
                  text-align: left;
                  font-size: 14px;
                "
                >{{
                  ite.value == 1 ? "普通" : ite.value == 2 ? "紧急" : "十万火急"
                }}</span
              >
            </el-col>
          </el-row>
          <el-row style="margin-top: 10px">
            <el-col :span="6" style="text-align: right; padding-right: 10px">
              <span
                style="
                  display: block;
                  width: 100%;
                  text-align: right;
                  font-size: 14px;
                "
              >
                产品名称:</span
              >
            </el-col>
            <el-col
              v-for="(ite, ind) in item"
              :key="ind"
              :span="18"
              style="text-align: left"
            >
              <span
                v-if="ite.field_name == '产品名称'"
                style="display: block; width: 100%; text-align: left"
                :style="{
                  fontSize: ite.size > 1 ? '16px' : '16px',
                  fontWeight: ite.size > 1 ? 'bold' : '200',
                }"
                >{{ ite.value }}</span
              >
            </el-col>
          </el-row>
          <el-row style="margin-top: 10px">
            <el-col :span="6" style="text-align: right; padding-right: 10px">
              <span
                style="
                  display: block;
                  width: 100%;
                  text-align: right;
                  font-size: 14px;
                "
              >
                订单型号:</span
              >
            </el-col>
            <el-col
              v-for="(ite, ind) in item"
              :key="ind"
              :span="18"
              style="text-align: left"
            >
              <span
                v-if="ite.field_name == '订单型号'"
                style="display: block; width: 100%; text-align: left"
                :style="{
                  fontSize: ite.size > 1 ? '16px' : '16px',
                  fontWeight: ite.size > 1 ? 'bold' : '200',
                }"
                >{{ ite.value }}</span
              >
            </el-col>
          </el-row>
          <el-row style="margin-top: 10px">
            <el-col :span="6" style="text-align: right; padding-right: 10px">
              <span
                style="
                  display: block;
                  width: 100%;
                  text-align: right;
                  font-size: 14px;
                "
              >
                订单规格:</span
              >
            </el-col>
            <el-col
              v-for="(ite, ind) in item"
              :key="ind"
              :span="18"
              style="text-align: left"
            >
              <span
                v-if="ite.field_name == '订单规格'"
                style="
                  display: block;
                  width: 100%;
                  text-align: left;
                  font-size: 14px;
                "
                :style="{
                  fontSize: ite.size > 1 ? '16px' : '16px',
                  fontWeight: ite.size > 1 ? 'bold' : '200',
                }"
                >{{ ite.value }}</span
              >
            </el-col>
          </el-row>
          <el-row style="margin-top: 10px">
            <el-col :span="6" style="text-align: right; padding-right: 10px">
              <span
                style="
                  display: block;
                  width: 100%;
                  text-align: right;
                  font-size: 14px;
                "
              >
                订单颜色:</span
              >
            </el-col>
            <el-col
              v-for="(ite, ind) in item"
              :key="ind"
              :span="18"
              style="text-align: left"
            >
              <span
                v-if="ite.field_name == '订单颜色'"
                style="
                  display: block;
                  width: 100%;
                  text-align: left;
                  font-size: 14px;
                "
                :style="{
                  fontSize: ite.size > 1 ? '16px' : '16px',
                  fontWeight: ite.size > 1 ? 'bold' : '200',
                }"
                >{{ ite.value }}</span
              >
            </el-col>
          </el-row>
          <el-row style="margin-top: 10px">
            <el-col :span="6" style="text-align: right; padding-right: 10px">
              <span
                style="
                  display: block;
                  width: 100%;
                  text-align: right;
                  font-size: 14px;
                "
              >
                订单方向:</span
              >
            </el-col>
            <el-col
              v-for="(ite, ind) in item"
              :key="ind"
              :span="18"
              style="text-align: left"
            >
              <span
                v-if="ite.field_name == '订单方向'"
                style="
                  display: block;
                  width: 100%;
                  text-align: left;
                  font-size: 14px;
                "
                :style="{
                  fontSize: ite.size > 1 ? '16px' : '16px',
                  fontWeight: ite.size > 1 ? 'bold' : '200',
                }"
                >{{ ite.value }}</span
              >
            </el-col>
          </el-row>
          <el-row style="margin-top: 10px">
            <el-col :span="6" style="text-align: right; padding-right: 10px">
              <span
                style="
                  display: block;
                  width: 100%;
                  text-align: right;
                  font-size: 14px;
                "
              >
                领单时间:</span
              >
            </el-col>
            <el-col
              v-for="(ite, ind) in item"
              :key="ind"
              :span="18"
              style="text-align: left"
            >
              <span
                v-if="ite.field_name == '领单时间'"
                style="
                  display: block;
                  width: 100%;
                  text-align: left;
                  font-size: 14px;
                "
                >{{ ite.value ? ite.value : strDate }}</span
              >
            </el-col>
          </el-row>
          <el-row style="margin-top: 10px">
            <el-col :span="6" style="text-align: right; padding-right: 10px">
              <span
                style="
                  display: block;
                  width: 100%;
                  text-align: right;
                  font-size: 14px;
                "
              >
                领单人:</span
              >
            </el-col>
            <el-col
              v-for="(ite, ind) in item"
              :key="ind"
              :span="18"
              style="text-align: left"
            >
              <span
                v-if="ite.field_name == '领单人'"
                style="
                  display: block;
                  width: 100%;
                  text-align: left;
                  font-size: 14px;
                "
                >{{ ite.value ? ite.value : "外包" }}</span
              >
            </el-col>
          </el-row>
          <el-row style="margin-top: 10px">
            <el-col :span="6" style="text-align: right; padding-right: 10px">
              <span
                style="
                  display: block;
                  width: 100%;
                  text-align: right;
                  font-size: 14px;
                "
              >
                领单人ID:</span
              >
            </el-col>
            <el-col
              v-for="(ite, ind) in item"
              :key="ind"
              :span="18"
              style="text-align: left"
            >
              <span
                v-if="ite.field_name == '领单人ID'"
                style="
                  display: block;
                  width: 100%;
                  text-align: left;
                  font-size: 14px;
                "
                >{{ ite.value }}</span
              >
            </el-col>
          </el-row>
          <el-row style="margin-top: 10px">
            <el-col :span="6" style="text-align: right; padding-right: 10px">
              <span
                style="
                  display: block;
                  width: 100%;
                  text-align: right;
                  font-size: 14px;
                "
              >
                职工工种:</span
              >
            </el-col>
            <el-col
              v-for="(ite, ind) in item"
              :key="ind"
              :span="18"
              style="text-align: left"
            >
              <span
                v-if="ite.field_name == '职工工种'"
                style="
                  display: block;
                  width: 100%;
                  text-align: left;
                  font-size: 14px;
                "
                >{{ ite.value }}</span
              >
            </el-col>
          </el-row>
          <el-row style="margin-top: 10px">
            <el-col :span="6" style="text-align: right; padding-right: 10px">
              <span
                style="
                  display: block;
                  width: 100%;
                  text-align: right;
                  font-size: 14px;
                "
              >
                订单备注:</span
              >
            </el-col>
            <el-col
              v-for="(ite, ind) in item"
              :key="ind"
              :span="18"
              style="text-align: left"
            >
              <span
                v-if="ite.field_name == '订单备注'"
                style="
                  display: block;
                  width: 100%;
                  text-align: left;
                  font-size: 14px;
                "
                >{{ ite.value }}</span
              >
            </el-col>
          </el-row>
        </div>
        <div style="page-break-after: always"></div>
      </div>
    </div>
  </div>
</template>

<script>
import vueQr from "vue-qr";
import { drawOrderChildByEmployeeCardNumnber } from "@/api/product/index";
export default {
  components: {
    vueQr,
  },
  data() {
    return {
      dayinlist: [],
      strDate: "",
      company_name: "",
      parent_username: "",
    };
  },
  mounted() {
    this.dayinlist = JSON.parse(this.$route.query.data);
    this.company_name = this.$store.getters.userInfo.company_name;
    this.parent_username = this.$store.getters.userInfo.parent_username;
    this.currentTime();
    console.log(JSON.parse(this.$route.query.data));
  },
  methods: {
    post_drawOrderChildByEmployeeCardNumnber(user_id, order_child_id) {
      let obj = {
        order_child_id,
        user_id,
        parent_username: this.parent_username,
      };
      drawOrderChildByEmployeeCardNumnber().then((res) => {
        if (res.code == 200) {
          this.$print(this.$refs.print);
        }
      });
    },
    istrue(item) {
      // console.log(item);
      for (let j in item) {
        // console.log(item[j])
        for (let i in item[j]) {
          // console.log(item[j])
          if (item[j][i] == "draw_time") {
            if (item[j][i].value) {
              return true;
            } else {
              return false;
            }
          }
        }
      }
    },
    print() {
      this.dayinlist.forEach((item) => {
        let ist = this.istrue(item);
        console.log(ist);
        if (!ist) {
          console.log(item);
          for (let j in item) {
            if (item[j].field_name == "employee_user_id") {
              for (let i in item) {
                this.post_drawOrderChildByEmployeeCardNumnbe(
                  i.value,
                  item.order_child_id
                );
              }
            }
          }
        }
      });
    },
    /**
     * 获取当前时间
     */
    currentTime() {
      var date = new Date();
      var year = date.getFullYear(); //月份从0~11，所以加一
      let month = date.getMonth();
      console.log("month", month);
      var dateArr = [
        date.getMonth() + 1,
        date.getDate(),
        date.getHours(),
        date.getMinutes(),
        date.getSeconds(),
      ];
      //如果格式是MM则需要此步骤，如果是M格式则此循环注释掉
      for (var i = 0; i < dateArr.length; i++) {
        if (dateArr[i] >= 1 && dateArr[i] <= 9) {
          dateArr[i] = "0" + dateArr[i];
        }
      }
      this.strDate =
        year +
        "/" +
        dateArr[0] +
        "/" +
        dateArr[1] +
        " " +
        dateArr[2] +
        ":" +
        dateArr[3] +
        ":" +
        dateArr[4];
    },
  },
};
</script>
<style scoped>
/* *{
  padding: 0;
  margin: 0;
} */
.dayin {
  /* padding: 25px; */
  box-sizing: border-box;
}

#printArea {
  width: 310px;
  padding: 5px;
  box-sizing: border-box;
  margin: 0 auto;
}

#printArea > div {
  margin-top: 50px;
}
#printArea > div:first-child {
  margin-top: 0px;
}
#printArea table {
  width: 100%;
  border-collapse: collapse;
}
#printArea table th {
  color: white;
  height: 50px;
  line-height: 50px;
  font-size: 35px;
}
#printArea table {
  border: 1px solid #c5c5c5;
}
#printArea table td,
table th {
  border: 1px solid #c5c5c5;
  text-align: center;
  padding: 0;
  margin: 0;
}

#printArea table tr td {
  height: 35px;
  line-height: 35px;
}
#printArea table thead th {
  background-color: #0a8fa1;
}

#printArea table tr th,
table tr td {
  padding: 5px 12px;
}

@page {
  size: auto; /* auto is the initial value */
  margin: 3mm; /* this affects the margin in the printer settings */
}
.procedure {
  word-wrap: break-word;
}

.dayin_btn {
  background: #0a8fa1;
  border: none;
  display: block;
  margin: 20px auto;
}
</style>
